import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { FormInstance } from 'antd/lib/form';
import { Modal, Button, Form, message, Input, DatePicker, Select, InputNumber } from 'antd';
// import { Form } from '@ant-design/compatible';
import PropTypes from "prop-types";
import moment from 'moment'
import { getDictOptionsByCode } from '@/support/common';

const FormItem = Form.Item;
const { TextArea } = Input;
const mapStateToProps = (state: any) => ({
  burningVehicle: state.burningVehicle,
  // loading: state.loading.effects['burningVehicle/postObjWithRes'],
})
class BurgingModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.object,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
    };
  }

  componentDidUpdate(prevProps: any) {
    const { modalVisible, formData } = this.props
    if (modalVisible && modalVisible !== prevProps.modalVisible) {
      this.formRef && this.formRef.current?.setFieldsValue({
        ...formData
      })
    }
  }

  handleSubmit = () => {
    this.formRef.current?.submit();
  }

  onFinish = (values: any) => {
    const { dispatch, formData, freshPage } = this.props
    let postData = {
      ...values,
      happenDate: moment(values.happenDate).format('YYYY-MM-DD HH:mm:ss'),
    }
    let dType = 'burningVehicle/postObjWithRes'
    if (formData?.sid) {
      postData.sid = formData?.sid
      dType = 'burningVehicle/putObjWithRes'
    }
    this.setState({
      loading: true
    })
    dispatch({
      type: dType,
      payload: {
        url: '/battery/monitor/selfIgnition',
        ...postData,
      },
      callback: (res: any) => {
        if (res.statusCode === '0') {
          message.success( postData.sid ? '编辑成功': '新增成功');
          this.close();
          freshPage()
        }
        this.setState({
          loading: false
        })
      }
    })
  }

  close = () => {
    const { closeModal } = this.props;
    this.formRef.current && this.formRef.current.resetFields();
    closeModal();
  }

  render() {
    const { formData, modalVisible } = this.props
    const { loading } = this.state
    const burningStatus = getDictOptionsByCode(this.context.dicData, 'burningStatus')
    const footer = (
      <div>
        <Button size="small" onClick={this.close}>
          取消
        </Button>
        <Button size="small" loading={loading} onClick={this.handleSubmit} type="primary">
          提交
        </Button>
      </div>
    )
    let title = formData.sid ? '编辑自燃车辆' : '新增自燃车辆';

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { 
          span: 6,
          // offset: 4,
        },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { 
          span: 14,
        },
        md: { span: 16 },
      },
    };

    return (
      <Modal
        title={title}
        footer={footer}
        visible={modalVisible}
        width={700}
        onCancel={this.close}
      >
        <Form
          style={{ marginTop: 12 }}
          ref={this.formRef}
          onFinish={this.onFinish}
        >
          <FormItem
            {...formItemLayout}
            label="VIN码"
            colon={false}
            name="vin"
            rules={[{ required: true, message: '请输入VIN码', whitespace: true }]}
          >
            <Input placeholder="请输入VIN码" maxLength={100} />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="自燃日期"
            colon={false}
            name="happenDate"
            rules={[{ required: true, message: '请输入自燃日期' }]}
          >
            <DatePicker
              style={{width: '100%'}}
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="请输入自燃日期"  />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="自燃地址"
            colon={false}
            name="address"
            rules={[]}
          >
            <Input placeholder="请输入自燃地址" maxLength={100} />
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="自燃时车辆状态"
            colon={false}
            name="status"
            rules={[{ required: true, message: '请选择自燃时车辆状态' }]}
          >
            {/* <Input placeholder="请选择自燃时车辆状态" maxLength={100} /> */}
            <Select
              allowClear
              placeholder="请选择自燃时车辆状态"
              getPopupContainer={triggerNode => triggerNode.parentNode}
              options={burningStatus}
            ></Select>
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="备注记录"
            colon={false}
            name="remark"
            rules={[]}
          >
            <TextArea rows={4} placeholder="请输入备注记录" />
          </FormItem>
        </Form>
      </Modal>
    )
  }
}
export default connect(mapStateToProps)(BurgingModal);
